<template>
	<view class="section">
		<view class="img">
			<image src="../../static/img/yuchanqi.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="user">
			<text class="section__title">末次月经的第一天：</text>
			<picker @change="bindDateChange" mode="date" value="data">
				<view class="picker">
					{{date}}
				</view>
			</picker>
		</view>
		<view class="user">
			<view class="section__title">月经周期（天）：</view>
			<picker @change="bindNumChange" mode="selector" :range="cycle" value="index">
				<view class="picker">
					{{cycleValue}}
				</view>
			</picker>
		</view>
		<view @click="primary" class="pre_btn active">计算预产期</view>
		<view class="picker_result">
			<text class="left">您的预产期是：</text>
			<text class="right" v-if="show">{{year+'-'+mouth+'-'+day}}</text>
		</view>
		<view class="picker_result">
			<text class="left">您正处于怀孕的：</text>
			<text class="right" v-if="show">第{{week}}周{{days}}天</text>
		</view>
		<view class="picker_result">
			<text class="left">距离宝宝出生还有：</text>
			<text class="right" v-if="show">{{remainDay}}天</text>
		</view>
		<view class="text">
			一般孕妈的整个孕期约为40周，即9个月零7天左右，通常通过末次月经时间可以推算预产期。推算方法是按末次月经时间的第一日算起，月份减3或加9，日数加7。不过孕妈们要注意的是，宝宝在预产期准时出生的几率只有5%.
		</view>

	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				date: "点击选择",
				cycleValue: "点击选择",
				cycle: [],
				year: "0000",
				mouth: "00",
				day: "00",
				week: "0",
				days: "0",
				remainDay: "0",
				show: !1
			}
		},
		onLoad() {
			for (var t = [], a = 20; a <= 45; a++) t.push(a);
			this.cycle = t;
		},
		computed: {
			...mapState('m_user', ['token']),
		},
		methods: {
			bindNumChange(e) {
				console.log("picker发送选择改变，携带值为", e.detail.value)
				this.cycleValue = this.cycle[e.detail.value]
			},
			bindDateChange(e) {
				console.log("picker发送选择改变，携带值为", e.detail.value),
					this.date = e.detail.value
				console.log(e.detail.value)
			},
			copy() {
				uni.setClipboardData({
					data: "schoolmum",
					success: function(e) {
						uni.getClipboardData({
							success: function(e) {
								console.log(e.data);
							}
						});
					}
				});
			},
			primary() {
				var e = this.date.split("-"),
					t = (e.length, this.date),
					a = this.cycleValue;
				if (console.log(t), "点击选择" == t || "点击选择" == a) return uni.showToast({
					title: "请选择信息",
					icon: "none"
				}), !1;
				for (var o = 0; o < e.length; o++)
					if (!e[o]) return alert(errorMessage[o]), !1;
				e = new Date(e.join("/")).getTime();
				var n = 1 * this.cycleValue,
					i = new Date(e + 864e5 * (n + 252)),
					s = new Date().getTime(),
					c = Math.floor((s - e) / 864e5);
				if (c < 0) return uni.showToast({
					title: "您的末次月经超过当前时间了！",
					icon: "none"
				}), !1;
				var l = Math.floor(c / 7),
					r = parseInt(c % 7) + 1,
					u = Math.floor((i.getTime() - s) / 864e5) + 1;
				if (u < 0) return uni.showToast({
					title: "您的预产期已经超过了！",
					icon: "none"
				}), !1;
				
				this.year = i.getFullYear(),
					this.mouth = i.getMonth() + 1,
					this.day = i.getDate(),
					this.week = l,
					this.days = r,
					this.remainDay = u,
					this.show = !0;
				var Pregnancy = uni.getStorageSync('token').JseSsionId;
				if(Boolean(Pregnancy)){
				uni.request({
					//api地址
					url: 'https://anmti.cn/canlogin/saveExpectedDays',
					//设置请求类型等于外部传入类型
					method: 'get',
					//配置请求头信息
					data:{days:this.remainDay},
					header: {
						"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
					},
					//请求成功
					success: (res) => {
						console.log(res);
						if (res.statusCode !== 200) return uni.$showMsg()
					},
				//请求失败
					fail: (err) => {
						console.log(err);
					},
				})
				}


			}
		},

	}
</script>

<style>
	.section {
		padding: 30rpx;
	}

	.img {
		margin-bottom: 20rpx;
	}

	.user {
		width: 100%;
		height: 40prx;
		display: flex;
		font-size: 30rpx;
		color: #EE6AA7;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #a8a8a8;
	}

	.user .section__title {
		width: 300rpx;
	}

	.user .picker {
		width: 300rpx;
		text-align: center;
	}

	.active {
		width: 100%;
		color: #EE6AA7;
		background-color: #feeeed;
		padding: 0;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.picker_result {
		border: 4rpx solid #feeeed;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx;
		padding-left: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	.picker_result .right {
		color: #EE6AA7;
	}

	.text {
		color: #EE6AA7;
	}
</style>
